﻿
@{
    ViewBag.Title = "ZhouJiHua";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="~/webuploader/webuploader.css">
<!--引入JS-->
<script type="text/javascript" src="~/webuploader/webuploader.js"></script>
<!--SWF在初始化的时候指定，在后面将展示-->
<div id="app" class="row">
    <div class="col-lg-12">
        <div class="row" id="list">
            <div class="col-lg-12">
                <table id="dynamic-table" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th class="center">
                                名称
                            </th>
                            <th>创建时间</th>
                            <th>所属时间</th>
                            <th>状态</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="tr in khblst">
                            <td class="center">
                                {{tr.mkhbmc}}
                            </td>
                            <td>
                                {{tr.cjsjstr}}
                            </td>
                            <td>
                                {{tr.sssjstr}}
                            </td>
                            <td>
                                <template v-if="tr.khbzt==1">
                                    创建完成
                                </template>
                                <template v-if="tr.khbzt==2">
                                    编辑中
                                </template>
                                <template v-if="tr.khbzt==3">
                                    提交审核
                                </template>
                                <template v-if="tr.khbzt==4">
                                    通过审核
                                </template>
                                <template v-if="tr.khbzt==5">
                                    生成考核表
                                </template>
                            </td>
                            <td>

                                <div class="btn-group" v-if="tr.khbzt==3||tr.khbzt==4">
                                    <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle btn-sm">
                                        操作
                                        <i class="ace-icon fa fa-angle-down icon-on-right"></i>
                                    </button>

                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#" v-on:click="p_ShowZhouList(tr)">周计划列表</a>
                                        </li>
                                        @*<li>
                                                <a href="#" v-on:click="p_ZhouJiHuaZhiZhuo(tr)">周计划制作</a>
                                            </li>*@
                                    </ul>
                                </div><!-- /.btn-group -->
                            </td>

                        </tr>

                    </tbody>
                </table>
            </div>
        </div>

        <div class="row" id="info" style="display: none">
            <div class="col-xs-12  widget-container-col">
                <!-- #section:custom/widget-box -->
                <div class="widget-box">
                    <div class="widget-header">
                        <h5 class="widget-title">编辑区</h5>

                        <!-- #section:custom/widget-box.toolbar -->
                        <div class="widget-toolbar">
                            <div class="widget-menu">
                                <a href="#" data-action="settings" data-toggle="dropdown">
                                    <i class="ace-icon fa fa-bars"></i>
                                </a>

                                <ul class="dropdown-menu dropdown-menu-right dropdown-light-blue dropdown-caret dropdown-closer">
                                    <li>
                                        <a data-toggle="tab" href="#dropdown1" v-on:click="ShowList()">返回列表</a>
                                    </li>

                                </ul>
                            </div>


                        </div>

                        <!-- /section:custom/widget-box.toolbar -->
                    </div>

                    <div class="widget-body">
                        <div class="widget-main">
                            <div class="form-horizontal" role="form">
                                <div class="row">
                                    <div class="col-xs-5">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                工作计划名称：
                                            </span>
                                            <input type="text" class="form-control search-query" placeholder="工作计划名称" readonly="readonly" v-bind:value="khbinfo.xingming+khbinfo.mkhbmc" />

                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <table class="table  table-bordered table-hover">
                                        <thead class="thin-border-bottom">
                                            <tr>
                                                <th>
                                                    名称
                                                </th>
                                                <th>单项分值</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <template v-for="tr in khbinfo.MyKaoHeBiaoOnes">
                                                <tr>
                                                    <td>
                                                        {{tr.mbnr}}
                                                    </td>

                                                    <td>
                                                        {{tr.fz}}
                                                    </td>
                                                </tr>
                                                <tr class="detail-row open">
                                                    <td colspan="2">
                                                        <div class="table-detail">
                                                            <div class="row">
                                                                <div class="col-xs-12">
                                                                    <p>
                                                                        <span class="label label-xlg label-primary arrowed arrowed-right">包含子项</span>
                                                                        <template v-if="tr.isedit">
                                                                            <button class="btn btn-white btn-success btn-bold" type="button" v-on:click="p_AddTwo(tr)">
                                                                                <i class="ace-icon glyphicon glyphicon-plus bigger-120 orange"></i>
                                                                                新增子项
                                                                            </button>
                                                                        </template>
                                                                    </p>
                                                                    <table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">
                                                                        <thead>
                                                                            <tr>
                                                                                <th style="width: 350px">名称</th>
                                                                                <th style="width: 400px">工作完成情况(佐证材料)</th>
                                                                                <th style="width: 150px">预计完成时间</th>
                                                                                <th style="width: 20px">分值</th>
                                                                                <th style="width: 40px">自评</th>
                                                                                <th>附件</th>
                                                                                <th></th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            <tr v-for="son in tr.MyKaoHeBiaoTwos">
                                                                                <td>
                                                                                    {{son.mbnr}}
                                                                                </td>
                                                                                <td>
                                                                                    {{son.gzjhwcqk}}
                                                                                </td>
                                                                                <td>
                                                                                    {{son.gzjhwcsjstr}}
                                                                                </td>
                                                                                <td>
                                                                                    {{son.fz}}
                                                                                </td>
                                                                                <td>
                                                                                    {{son.zp}}
                                                                                </td>
                                                                                <td>
                                                                                    <a href="javascript:void(0)" v-on:click="ShowLinShiGongZuo(son.twoid,$event)">查看附件</a>
                                                                                </td>
                                                                                <td>
                                                                                    <template v-if="son.zhou<=0">

                                                                                        <button class="btn btn-white btn-primary btn-bold btn-sm" type="button" v-on:click="shezhizhou(son,zhou)">
                                                                                            <i class="ace-icon fa fa-lock bigger-120"></i>
                                                                                            本周计划
                                                                                        </button>
                                                                                    </template>
                                                                                    <template v-if="son.zhou>0">

                                                                                        <button class="btn btn-white btn-warning btn-bold btn-sm" type="button" v-on:click="quxiaoshezhizhou(son,zhou)">
                                                                                            <i class="ace-icon fa fa-unlock  bigger-120"></i>
                                                                                            撤销本周计划
                                                                                        </button>
                                                                                    </template>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </template>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- /section:custom/widget-box -->
            </div>
            <!-- /.span -->
        </div><!-- /.row -->
        <!--弹出框-->
        <div class="row">
            <div class="col-xs-12">
                <div id="dialog-linshigongzuo" class="hide">
                    <div class="row">
                        <div class="col-xs-12">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th class="center">
                                            周数
                                        </th>
                                        <th class="center">包含</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="tr in weeks">
                                        <td class="center">
                                            全年第{{tr.周数}}周
                                        </td>
                                        <td>{{tr.星期List.join(',')}}</td>
                                        <td>
                                            <template v-if="tr.Is有效==true">
                                                <button class="btn btn-white btn-primary btn-bold btn-sm" type="button" v-on:click="p_YiChuangJian(tr.周数)">
                                                    <i class="ace-icon fa fa-print bigger-120"></i>
                                                    查看
                                                </button>
                                            </template>
                                            <template v-if="tr.Is有效==false">
                                                <button class="btn btn-white btn-primary btn-bold btn-sm" type="button" v-on:click="p_WeiChuangJian(tr.周数)">
                                                    <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                                                    创建
                                                </button>
                                            </template>
                                        </td>

                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>

                </div><!-- #dialog-message -->
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div id="editmessage" class="hide">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-horizontal" role="form">

                                <form class="form-horizontal" role="form">
                                    <div class="row">
                                        <div class="col-xs-8">
                                            <div class="form-group">
                                                <div>
                                                    <label for="form-field-8">工作内容</label>

                                                    <textarea class="form-control" id="form-field-8"
                                                              placeholder="工作内容" rows="3" v-model="khnrtow.mbnr"></textarea>
                                                </div>
                                            </div>
                                            <div class="hr hr-24"></div>
                                            <div class="form-group">
                                                <div>
                                                    <label for="form-field-1" data-rel="tooltip" title="完成时填写，未完成可不填写">完成情况</label>

                                                    <textarea class="form-control" id="form-field-1"
                                                              placeholder="完成情况" v-model="khnrtow.gzjhwcqk"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xs-4">
                                            <div class="alert alert-info">
                                                <div class="form-group">
                                                    <div>
                                                        <label for="form-field-select-1">工作承担人</label>

                                                        <select class="form-control" id="form-field-select-1" v-model="khnrtow.gzcdrid" @@change="getgzcdr">
                                                            <option :value="coupon.userinfoId" v-for="coupon in gzcdrlist">{{coupon.XingMing}}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="date-picker2">计划完成时间</label>

                                                    <div class="row">
                                                        <div class="col-xs-8 col-sm-11">
                                                            <!-- #section:plugins/date-time.datepicker -->
                                                            <div class="input-group">
                                                                <input class="form-control date-picker2"
                                                                       id="date-picker2" type="text"
                                                                       data-date-format="yyyy-mm-dd" readonly="readonly" />
                                                                <span class="input-group-addon">
                                                                    <i class="fa fa-calendar bigger-110"></i>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="form-field-2">分值</label>

                                                    <div>
                                                        <input type="text" id="form-field-2" placeholder="分值"
                                                               class="col-xs-10 col-sm-5" v-model="khnrtow.fz" />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div>
                                                        <label>重要程度</label>

                                                        <select class="form-control" v-model="khnrtow.zycd">
                                                            <option value="1">重要</option>
                                                            <option value="2">一般</option>
                                                            <option value="3">不重要</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- #section:elements.form -->
                                </form>
                            </div>
                        </div>
                    </div>
                </div><!-- #dialog-message -->
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
</script>
<script src="~/Template/ace_admin_v1.4.0/components/jquery.maskedinput/src/jquery.maskedinput.js"></script>
<script src="~/Scripts/JsModel/Model_KaoHeBiao.js"></script>
<script type="text/javascript">
    //$(document).ready(function () {
    //    $('.input-mask-date').mask('9999/99/99');
    //});

    var vm = new Vue(
        {
            el: "#app",
            data: {
                khblst: [],
                khbinfo: new KaoHeBiao(),
                weeks: [],
                khnrtow: new MyKaoHeBiaoTwo(),
                gzcdrlist: [],
                dialog: null,
                zhou: -1
            },
            filter() {

            },
            mounted() {

                this.initPage();
            },
            methods: {
                //初始化
                initPage: function () {
                    var _self = this;
                    _self.applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
                    _self.p_Gets();
                },
                //显示详细考核表
                ShowInfo: function () {
                    var _self = this;
                    $("#list").hide(function () {
                        $("#info").show();
                    });
                    $("#dialog-linshigongzuo").dialog("close");
                },
                //显示考核表列表
                ShowList: function () {
                    $("#info").hide(function () {
                        $("#list").show();
                    });
                },
                //显示月计划的周列表
                p_ShowZhouList: function (obj) {
                    ///<summary>显示周计划列表</summary>
                    var _self = this;
                    _self.p_Get(obj.mkhbid);

                    _self.dialog = dialog_comm(true,
                        "dialog-linshigongzuo",
                        "周计划列表",
                        null,
                        function () { },
                        true, "600");
                },
                //获取未配置周计划的月计划
                p_WeiChuangJian(zhou) {
                    ///<summary>周计划制作</summary>
                    var _self = this;
                    _self.zhou = zhou;
                    axios.get("@Url.Action("GetWeiFenPeiYueJiHua", "MyCaoZuo")", { params: { khbid: _self.khbinfo.mkhbid } }).then((response) => {
                        _self.khbinfo = new KaoHeBiao(response.data);
                        _self.ShowInfo();
                        console.log(response);
                    },
                        (response) => {

                        }
                    ).catch(function (response) {
                        console.log(response);
                    });
                },
                //获取月计划的所有周列表
                p_GetWeeks: function (obj) {
                    var _self = this;
                    axios.get("@Url.Action("WeeksOfMonth", "MyCaoZuo")").then(
                        (response) => {
                            _self.weeks = response.data;
                            $(obj.MyKaoHeBiaoOnes).each(function (i, item) {
                                $(item.MyKaoHeBiaoTwos).each(function (i2, item2) {
                                    $(_self.weeks).each(function (i3, item3) {
                                        if (item2.zhou == item3.周数) {
                                            item3.Is有效 = true;
                                            vm.$set(_self.weeks, i3, item3);
                                        }

                                    });

                                });
                            });
                            console.log(_self.weeks);
                        },
                        (response) => {

                        }
                    ).catch(function (response) {
                        console.log(response);
                    });
                },
                //获取考核表列表
                p_Gets: function () {
                    var _self = this;
                    axios.get("@Url.Action("GetMyKaoHeBiaos", "MyCaoZuo")").then((response) => {
                        _self.khblst = [];
                        for (var i = 0; i < response.data.length; i++) {
                            _self.khblst.push(response.data[i]);
                        }
                    },
                        (response) => {

                        }
                    ).catch(function (response) {
                        console.log(response);
                    });
                },
                //获取考核表详情
                p_Get: function (khbid) {
                    var _self = this;
                    axios.get("@Url.Action("GetMyKaoHeBiaoInfo", "MyCaoZuo")", { params: { khbid: khbid } }).then((response) => {
                        _self.khbinfo = new KaoHeBiao(response.data);
                        _self.p_GetWeeks(_self.khbinfo);
                    },
                        (response) => {

                        }
                    ).catch(function (response) {
                        console.log(response);
                    });
                },
                //显示模态框_添加二级内容
                p_AddTwo(obj) {
                    this.p_OpenEditMessage(obj, new MyKaoHeBiaoTwo());
                },
                //模态框_显示二级内容
                p_OpenEditMessage: function (f, s) { //打开编辑任务对话框
                    var _self = this;
                    $('#form-field-2').unbind('keyup');
                    //绑定事件
                    $('#form-field-2').bind('keyup', function () { _self.p_fzyanzheng(f) });
                    //e.preventDefault();
                    _self.khnrtow = new MyKaoHeBiaoTwo(s);
                    _self.dialog = dialog_comm(true,
                        "editmessage",
                        "编辑工作内容",
                        null,
                        function () { _self.p_Savetow(f) },
                        true,
                        '930');
                },
                //分值验证
                p_fzyanzheng() {//分值验证
                    var self = this;
                    var yyfz = 0; //已经使用的分值
                    $(f.MyKaoHeBiaoTwos).each(function (i, item) {
                        if (item.twoid != self.khnrtow.twoid) {
                            yyfz = parseInt(yyfz) + parseInt(item.fz);
                        }
                    });
                    yyfz = parseInt(yyfz) + parseInt(self.khnrtow.fz);
                    if (parseInt(yyfz) > parseInt(f.fz)) {
                        //bootbox.alert(f.mbnr + "：分值设置超了");
                        alert(f.mbnr + "：分值设置超了");
                        self.khnrtow.fz = 0;
                        $("#form-field-2").select();
                    }
                },
                //保存二级内容
                p_Savetow(f) { //保存单条信息
                    var self = this;
                    //TODO 添加一个分项，总项分值计算方式，不能超出总分
                    var self = this;
                    var yyfz = 0; //已经使用的分值
                    $(f.MyKaoHeBiaoTwos).each(function (i, item) {
                        if (item.twoid != self.khnrtow.twoid) {
                            yyfz = parseInt(yyfz) + parseInt(item.fz);
                        }
                    });
                    yyfz = parseInt(yyfz) + parseInt(self.khnrtow.fz);
                    if (parseInt(yyfz) > parseInt(f.fz)) {
                        alert(f.mbnr + "：分值设置超了");
                    } else {
                        self.khnrtow.gzjhwcsjstr = $("#date-picker2").val();
                        self.khnrtow.IsEdit = true;
                        var readyData = { model: self.khnrtow, mkhbid: self.khbinfo.mkhbid, oneid: f.oneid }
                        axios.post('@Url.Action("saveKaoHeNeiRongTow", "MyCaoZuo")', readyData).then(
                            (response) => {
                                debugger;
                                self.khnrtow.twoid = response.data;
                                var flag = true;
                                $(f.MyKaoHeBiaoTwos).each(function (i, item) {
                                    if (item.xlid != "" && item.xlid == self.khnrtow.xlid) {
                                        flag = false;
                                        f.MyKaoHeBiaoTwos.splice(i, 1, new MyKaoHeBiaoTwo(self.khnrtow));
                                        return false;
                                    }
                                });
                                if (flag) {
                                    f.MyKaoHeBiaoTwos.push(self.khnrtow);
                                }
                            },
                            (response) => {

                            }
                        )
                            .catch(
                                function (error) {
                                    bootbox.alert(error);
                                    //alert(error);
                                }
                            );
                    }

                },
                //删除二级内容
                p_DelTwo: function (f, obj) {
                    bootbox.confirm("你确定这个操作吗?",
                        function (result) {
                            if (result) {
                                var _self = this;
                                axios.get("@Url.Action("delKaoHeNeiRongTow", "MyCaoZuo")", { params: { towid: obj.twoid } }).then((response) => {
                                    bootbox.alert("成功");
                                    var index = -1;
                                    $(f.MyKaoHeBiaoTwos).each(function (i, item) {
                                        if (item.twoid == obj.twoid) {
                                            index = i;
                                        }
                                    });
                                    if (index > -1) {
                                        f.MyKaoHeBiaoTwos.splice(index, 1);
                                    }
                                },
                                    (response) => {

                                    }
                                ).catch(function (response) {
                                    console.log(response);
                                });
                            }
                        });
                },
                //显示模态框_编辑二级内容
                p_EditTwo(f, s) {//编辑操作
                    s.xlid = this.getGuid();
                    $("#date-picker2").val(s.gzjhwcsjstr);
                    this.p_OpenEditMessage(f, s);
                },
                //获取已分配周计划的月计划
                p_YiChuangJian(zhou) {
                    var _self = this;
                    _self.zhou=zhou
                    axios.get("@Url.Action("GetYiFenPeiZhouJiHua", "MyCaoZuo")", { params: { khbid: _self.khbinfo.mkhbid,zhou:zhou } }).then((response) => {
                        _self.khbinfo = new KaoHeBiao(response.data);
                        _self.ShowInfo();
                    },
                        (response) => {

                        }
                    ).catch(function (response) {
                        console.log(response);
                    });
                },
                //获取工作承担人
                getgzcdr() {
                    var _self = this;
                    $(_self.gzcdrlist).each(function (i, item) {
                        if (_self.khnrtow.gzcdrid == item.userinfoId) {
                            _self.khnrtow.gzcdr = item.XingMing;
                            console.log(_self.khnrtow.gzcdr);
                        }
                    });
                },
                //设置周计划
                shezhizhou(obj,zhou) {
                    var _self = this;
                    axios.get("@Url.Action("CreateDanTiaoZhouJiHua", "MyCaoZuo")", { params: { khbid: _self.khbinfo.mkhbid,twoid:obj.twoid,zhou:_self.zhou } }).then((response) => {
                            obj.zhou = zhou;
                        },
                        (response) => {

                        }
                    ).catch(function (response) {
                        console.log(response);
                    });
                },
                //取消设置周计划
                quxiaoshezhizhou(obj, zhou) {
                    var _self = this;
                    axios.get("@Url.Action("DelDanTiaoZhouJiHua", "MyCaoZuo")", { params: { khbid: _self.khbinfo.mkhbid,twoid:obj.twoid,zhou:zhou } }).then((response) => {
                            obj.zhou = -1;
                        },
                        (response) => {

                        }
                    ).catch(function (response) {
                        console.log(response);
                    });
                }
                }
        });
</script>